// 玻璃拟态卡片样式
.glass-morphism-card {
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  
  // 基础玻璃效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0.02) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
  
  // 内容区域
  & > * {
    position: relative;
    z-index: 2;
  }
  
  // 悬停效果
  &:hover {
    transform: translateY(-2px);
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    
    &::before {
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 100%
      );
    }
  }
  
  // 点击效果
  &:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
  }
  
  // 支持浏览器兼容性
  @supports not (backdrop-filter: blur(20px)) {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }
}
